import React, { Component, useState } from 'react';
import './setsystem.scss'
import { useNavigate } from 'react-router-dom';
import { List, Button, Toast } from 'antd-mobile'
import { Dialog } from 'react-vant'
function SetSystem() {
    const navigate = useNavigate()
    const [num, setnum] = useState(290)
    function del() {
        Dialog.confirm({
            message: '确定清楚当前APP所占的缓存吗?',
        })
            .then(() => {
                Toast.show({
                    icon: 'success',
                    content: '清除成功',
                })
                setnum(0)
            })
            .catch(() => {
                console.log('catch')
            })
    }
    return (
        <div className='setsystem'>
            <div className='header'>
                <i className='iconfont icon-fanhui' onClick={() => { navigate('/home/my') }} />
                <h3>系统设置</h3>
                <p></p>
            </div>
            <div className="list">
                <List style={{ '--font-size': '14px' }}>
                    <List.Item>
                        <div className='chu' onClick={() => { navigate('/safe') }}>
                            <span>账号与安全</span>
                            <i className="iconfont icon-xiangyoujiantou"></i>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div className='chu' onClick={() => { navigate('/privacy') }}>
                            <span>隐私设置</span>
                            <i className="iconfont icon-xiangyoujiantou"></i>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div className='chu' onClick={() => { navigate('/read') }}>
                            <span>阅读设置</span>
                            <i className="iconfont icon-xiangyoujiantou"></i>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div className='chu' onClick={() => { navigate('/notice') }}>
                            <span>通知设置</span>
                            <i className="iconfont icon-xiangyoujiantou"></i>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div className='chu' onClick={() => { del() }}>
                            <span>清除缓存</span>
                            <span>{num}kb</span>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div className='chu' onClick={() => { navigate('/aboutus') }}>
                            <span>关于我们</span>
                            <i className="iconfont icon-xiangyoujiantou"></i>
                        </div>
                    </List.Item>
                </List>
            </div>
            <div className='btn'>
                <Button block style={{ color: 'red', fontSize: '15px' }} size='middle'>
                    退出登录
                </Button>
            </div>

        </div>
    );

}

export default SetSystem;
